<template>
  <div class="app-cont">
      <div class="app-zuo">
          <div class="zou-top">
              <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          </div> 
          <div class="zou-botton">
            <div>
              <el-radio-group v-model="tabPosition" >
                <el-radio-button label="top">车辆列表</el-radio-button>
                <el-radio-button label="lift">我的关注</el-radio-button>
              </el-radio-group>

              <el-radio-group v-model="tabPositions" style="width: 250px;">
                <el-radio-button style="width: 83px;" label="2">全部</el-radio-button>
                <el-radio-button style="width: 83px;" label="1">在线</el-radio-button>
                <el-radio-button style="width: 83px;" label="3">离线</el-radio-button>
              </el-radio-group>
            </div>
              <el-table
                  :data="tableData"
                  style="width: 100%"
                  max-height="500">
                  <el-table-column
                      prop="date"
                      label="车辆图标"
                      width="100">
                  </el-table-column>
                  <el-table-column
                      prop="name"
                      label="车牌号"
                      width="100">
                  </el-table-column>
                  <el-table-column
                      prop="address"
                      label="状态数据">
                  </el-table-column>
              </el-table>
          </div>
      </div>
      <div class="app-you">
          <div class="you-top"></div> 
          <div class="you-botton">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="实时数据" name="first">
                    车牌号
                      <el-input clearable v-model="sssjParams.licenseNum" :style="{width: '10%'}">
                      </el-input>
                      <el-button type="primary" plain>视频/拍照</el-button>
                      <el-button type="primary" plain>点名</el-button>
                      <el-button type="primary" plain>配置终端区域</el-button>
                      <el-table v-loading="loading" :data="sssjList">
                        <el-table-column type="selection" width="55" align="center" />
                        <el-table-column label="id" align="center" prop="id" />
                        <el-table-column label="车牌号" align="center" prop="licenseNum" />
                        <el-table-column label="车辆组" align="center" prop="venicleGroup" />
                        <el-table-column label="在线" align="center" prop="onLine" />
                        <el-table-column label="GPS定位时间" align="center" prop="gps" />
                        <el-table-column label="车速" align="center" prop="speed" />
                        <el-table-column label="日里程" align="center" prop="dailyMileage" />
                        <el-table-column label="月里程" align="center" prop="monthlyMileage" />
                        <el-table-column label="累计里程" align="center" prop="amtMileage" />
                        <el-table-column label="位置" align="center" prop="position" />
                        <el-table-column label="状态" align="center" prop="status" />
                        <el-table-column label="SIM卡" align="center" prop="sim" />
                        <el-table-column label="颜色" align="center" prop="color" />
                        <el-table-column label="脉冲速度" align="center" prop="pulseVelocity" />
                        <el-table-column label="方向" align="center" prop="direction" />
                        <el-table-column label="油量" align="center" prop="oilQuantity" />
                        <el-table-column label="海拔" align="center" prop="altitude" />
                        <el-table-column label="经纬度" align="center" prop="lonLat" />
                      </el-table>
                      <pagination
                        v-show="sssjParams.total>0"
                        :total="sssjParams.total"
                        :page.sync="sssjParams.pageNum"
                        :limit.sync="sssjParams.pageSize"
                        @pagination="getList"
                      />
                  </el-tab-pane>
                  <el-tab-pane label="报警数据" name="bjsj">
                    车牌号
                      <el-input v-model="bjsjParams.licenseNum" clearable :style="{width: '10%'}"/>
                    报警类型
                      <el-input v-model="bjsjParams.alarmType" clearable :style="{width: '10%'}"/>
                    报警来源
                      <el-input v-model="bjsjParams.alarmSource" clearable :style="{width: '10%'}"/>
                      报警时间  
                      <el-date-picker clearable
                        v-model="bjsjParams.alarmTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择报警时间">
                      </el-date-picker>
                      <el-table v-loading="loading" :data="bjsjList">
                        <el-table-column type="selection" width="55" align="center" />
                        <el-table-column label="id" align="center" prop="id" />
                        <el-table-column label="车牌号" align="center" prop="licenseNum" />
                        <el-table-column label="颜色" align="center" prop="color" />
                        <el-table-column label="SIM卡" align="center" prop="sim" />
                        <el-table-column label="报警类型" align="center" prop="alarmType" />
                        <el-table-column label="报警来源" align="center" prop="alarmSource" />
                        <el-table-column label="报警地点" align="center" prop="alarmLct" />
                        <el-table-column label="报警时间" align="center" prop="alarmTime" width="180">
                          <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.alarmTime, '{y}-{m}-{d}') }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="所属机构" align="center" prop="seiItt" />
                        <el-table-column label="状态" align="center" prop="status" />
                        <el-table-column label="报警id" align="center" prop="alarmId" />
                      </el-table>
                      <pagination
                        v-show="bjsjParams.total>0"
                        :total="bjsjParams.total"
                        :page.sync="bjsjParams.pageNum"
                        :limit.sync="bjsjParams.pageSize"
                        @pagination="getList"
                      />
                  </el-tab-pane>
                  <el-tab-pane label="终端命令" name="zdml">
                    车牌号
                      <el-input clearable v-model="zdmlParams.licenseNum" :style="{width: '10%'}">
                      </el-input>
                      SIM卡号
                      <el-input clearable v-model="zdmlParams.sim" :style="{width: '10%'}">
                      </el-input>
                      命令类型
                      <el-input clearable v-model="zdmlParams.command_type" :style="{width: '10%'}">
                      </el-input>
                      时间段
                      <el-date-picker
                        v-model="zdmlParams.executeTime"
                        type="date"
                        placeholder="选择日期">
                      </el-date-picker>
                      <el-table v-loading="loading" :data="zdmlList">
                        <el-table-column type="selection" width="55" align="center" />
                        <el-table-column label="id" align="center" prop="id" />
                        <el-table-column label="车牌号" align="center" prop="licenseNum" />
                        <el-table-column label="SIM卡" align="center" prop="sim" />
                        <el-table-column label="命令类型" align="center" prop="commandType" />
                        <el-table-column label="命令内容" align="center" prop="commandContent" />
                        <el-table-column label="流水号" align="center" prop="serial_num" />
                        <el-table-column label="执行结果" align="center" prop="resultsExecute" />
                        <el-table-column label="下发时间" align="center" prop="distributeTime" width="180">
                          <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.distributeTime, '{y}-{m}-{d}') }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="执行时间" align="center" prop="executeTime" width="180">
                          <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.executeTime, '{y}-{m}-{d}') }}</span>
                          </template>
                        </el-table-column>
                      </el-table>
                      <pagination
                        v-show="zdmlParams.total>0"
                        :total="zdmlParams.total"
                        :page.sync="zdmlParams.pageNum"
                        :limit.sync="zdmlParams.pageSize"
                        @pagination="getList"
                      />
                  </el-tab-pane>
                  <el-tab-pane label="报警督办" name="bjdb">
                    <el-table v-loading="loading" :data="bjdbList">
                      <el-table-column type="selection" width="55" align="center" />
                      <el-table-column label="id" align="center" prop="id" />
                      <el-table-column label="车牌号" align="center" prop="licenseNum" />
                      <el-table-column label="所属机构" align="center" prop="seiItt" />
                      <el-table-column label="颜色" align="center" prop="color" />
                      <el-table-column label="报警类型" align="center" prop="alarmType" />
                      <el-table-column label="报警来源" align="center" prop="alarmSource" />
                      <el-table-column label="报警时间" align="center" prop="alarmTime" width="180">
                        <template slot-scope="scope">
                          <span>{{ parseTime(scope.row.alarmTime, '{y}-{m}-{d}') }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="处理" align="center" prop="handle" />
                      <el-table-column label="督办截止时间" align="center" prop="superviseEndtime" width="180">
                        <template slot-scope="scope">
                          <span>{{ parseTime(scope.row.superviseEndtime, '{y}-{m}-{d}') }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="督办级别" align="center" prop="superviseLevel" />
                      <el-table-column label="督办人" align="center" prop="supervisor" />
                      <el-table-column label="电子邮件" align="center" prop="email" />
                      <el-table-column label="联系电话" align="center" prop="phone" />
                    </el-table>
                    <pagination
                        v-show="bjdbParams.total>0"
                        :total="bjdbParams.total"
                        :page.sync="bjdbParams.pageNum"
                        :limit.sync="bjdbParams.pageSize"
                        @pagination="getList"
                      />
                  </el-tab-pane>
                  <el-tab-pane label="上级政府平台" name="sjzfpt">
                    <el-table v-loading="loading" :data="sjzfptList">
                      <el-table-column type="selection" width="55" align="center" />
                      <el-table-column label="id" align="center" prop="id" />
                      <el-table-column label="命令类型" align="center" prop="commandType" />
                      <el-table-column label="类型描述" align="center" prop="typeDescribe" />
                      <el-table-column label="车牌号" align="center" prop="licenseNum" />
                      <el-table-column label="颜色" align="center" prop="color" />
                      <el-table-column label="命令内容" align="center" prop="commandContent" />
                      <el-table-column label="状态" align="center" prop="status" />
                      <el-table-column label="下发时间" align="center" prop="distributeTime" width="180">
                        <template slot-scope="scope">
                          <span>{{ parseTime(scope.row.distributeTime, '{y}-{m}-{d}') }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="执行时间" align="center" prop="executeTime" width="180">
                        <template slot-scope="scope">
                          <span>{{ parseTime(scope.row.executeTime, '{y}-{m}-{d}') }}</span>
                        </template>
                      </el-table-column>
                    </el-table>
                    <pagination
                        v-show="sjzfptParams.total>0"
                        :total="sjzfptParams.total"
                        :page.sync="sjzfptParams.pageNum"
                        :limit.sync="sjzfptParams.pageSize"
                        @pagination="getList"
                      />
                  </el-tab-pane>
                  <el-tab-pane label="平台查岗" name="ptcg">
                    <el-table v-loading="loading" :data="ptcgList">
                      <el-table-column type="selection" width="55" align="center" />
                      <el-table-column label="id" align="center" prop="id" />
                      <el-table-column label="下发时间" align="center" prop="distributeTime" width="180">
                        <template slot-scope="scope">
                          <span>{{ parseTime(scope.row.distributeTime, '{y}-{m}-{d}') }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="上级平台" align="center" prop="superiorPlatform" />
                      <el-table-column label="查岗问题" align="center" prop="jobIssues" />
                      <el-table-column label="问题选项" align="center" prop="issuesOption" />
                      <el-table-column label="应答内容" align="center" prop="responseContent" />
                      <el-table-column label="应答状态" align="center" prop="responseStatus" />
                      <el-table-column label="应答时间" align="center" prop="responseTime" width="180">
                        <template slot-scope="scope">
                          <span>{{ parseTime(scope.row.responseTime, '{y}-{m}-{d}') }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                          <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="yd(scope.row)"
                            v-hasPermi="['system:ptcg:edit']"
                          >应答</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    <pagination
                        v-show="ptcgParams.total>0"
                        :total="ptcgParams.total"
                        :page.sync="ptcgParams.pageNum"
                        :limit.sync="ptcgParams.pageSize"
                        @pagination="getList"
                      />
                  </el-tab-pane>
              </el-tabs>
          </div>
      </div>
  </div>
</template>

<script>
import { listBjdb, getBjdb, delBjdb, addBjdb, updateBjdb } from "@/api/shis/bjdb";
import { listBjsj, getBjsj, delBjsj, addBjsj, updateBjsj } from "@/api/shis/bjsj";
import { listPtcg, getPtcg, delPtcg, addPtcg, updatePtcg } from "@/api/shis/ptcg";
import { listSjzfpt, getSjzfpt, delSjzfpt, addSjzfpt, updateSjzfpt } from "@/api/shis/sjzfpt";
import { listSssj, getSssj, delSssj, addSssj, updateSssj } from "@/api/shis/sssj";
import { listZdml, getZdml, delZdml, addZdml, updateZdml } from "@/api/shis/zdml";

export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 信息栏数据
      bjdbList: [],
      bjsjList: [],
      ptcgList: [],
      sjzfptList: [],
      sssjList: [],
      zdmlList: [],
      // 信息栏查询参数
      // 报警督办
      bjdbParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      // 报警数据
      bjsjParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        licenseNum: null,
        color: null,
        sim: null,
        alarmType: null,
        alarmSource: null,
        alarmLct: null,
        alarmTime: null,
        seiItt: null,
        status: null,
        alarmId: null
      },
      // 平台查岗
      ptcgParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      // 上级政府平台
      sjzfptParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      //实时数据
      sssjParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        licenseNum: null,
        venicleGroup: null,
        onLine: null,
        gps: null,
        speed: null,
        dailyMileage: null,
        monthlyMileage: null,
        amtMileage: null,
        position: null,
        status: null,
        sim: null,
        color: null,
        pulseVelocity: null,
        direction: null,
        oilQuantity: null,
        altitude: null,
        lonLat: null
      },
      //终端命令
      zdmlParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        licenseNum: null,
        sim: null,
        commandType: null,
        commandContent: null,
        serial_num: null,
        resultsExecute: null,
        distributeTime: null,
        executeTime: null
      },
      tabPositions:"",
      tabPosition: 'left',
      activeName: 'first',
      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        data: [{
        label: '唐老师机构',
        children: [{
          label: '一组'
        }]
      }, {
        label: '胡老师机构',
        children: [{
          label: '一组',
        },{
          label: '二组',
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listBjdb(this.bjdbParams).then(response => {
        this.bjdbList = response.rows;
        this.bjdbParams.total = response.total;
        this.loading = false;
      });
      listBjsj(this.bjsjParams).then(response => {
        this.bjsjList = response.rows;
        this.bjsjParams.total = response.total;
        this.loading = false;
      });
      listPtcg(this.ptcgParams).then(response => {
        this.ptcgList = response.rows;
        this.ptcgParams.total = response.total;
        this.loading = false;
      });
      listSjzfpt(this.sjzfptParams).then(response => {
        this.sjzfptList = response.rows;
        this.sjzfptParams.total = response.total;
        this.loading = false;
      });
      listSssj(this.sssjParams).then(response => {
        this.sssjList = response.rows;
        this.sssjParams.total = response.total;
        this.loading = false;
      });
      listZdml(this.zdmlParams).then(response => {
        this.zdmlList = response.rows;
        this.zdmlParams.total = response.total;
        this.loading = false;
      });

    },
    handleNodeClick(data) {
      console.log(data);
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    /** 应答操作 */
    yd(row) {
      this.reset();
      const id = row.id || this.ids
      getPtcg(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改实时监控_平台查岗";
      });
    },
  }
};
</script>

<style>
.app-cont{
  width: 100%;
  height: 800px;
}
  .app-zuo{
      width: 20%;
      height: 100%;
      float: left;
      border-right: 2px #e0dbdb solid;
  }
  .zou-top{
      height: 40%;
  }
  .zou-botton{
      height: 58%;
  }
  .app-you{
      width: 80%;
      height: 100%;
      float: left;
  }
  .you-top{
      height: 58%;
      width: 100%;
      background-image: url('~@/assets/images/shisjk.png');
      background-size:100% 100%;
  }
  .you-botton{
      height: 40%;
  }
</style>